import { imgAddPrefix } from '@/utils';
import { Avatar, Badge } from '@taroify/core';
import { View } from '@tarojs/components';

export default ({
  username = '添加',
  avatar = '/icon/circle-add.png',
  msgCount,
  uid,
  showName = true,
  size = 'medium',
}: {
  username?: string;
  avatar?: string;
  msgCount?: number;
  uid?: string; // 好友 uid，如果有，则 badge 红点会在该好友头像上方
  showName?: boolean;
  size?: 'mini' | 'large' | 'medium' | 'small';
}) => {
  function handleUser() {
    if (uid) {
    } else console.log('添加好友');
  }
  return (
    <View
      className="flex justify-center items-center flex-col"
      onClick={handleUser}
    >
      <View className="relative inline-block text-xs">
        <Avatar size={size} src={imgAddPrefix(avatar)} />
        {msgCount && msgCount > 0 && (
          <View className="absolute top-0 -right-2 h-4 w-4 flex justify-center items-center text-white rounded-full bg-red-500">
            {msgCount}
          </View>
        )}
      </View>
      {showName && <View>{username}</View>}
    </View>
  );
};
